/*
    Header component
 */
import QtQuick 2.1
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

import org.qtproject.qtquick 1.0

import "../message"

Rectangle {
    id: id_header
    z: 2 // so flickable doesn't draw on top
    anchors.top: parent.top
    height: 60 * ApplicationInfo.ratio
    width: parent.width
    color: "#333333"

    property string title: "Helloworld!"
    property string imageBack: "/images/resources/Back.png"
    property string imageIcon: "/images/resources/logo_acc_zing.png"
    property string imageMenuRight:"/images/resources/Overflow.png"
    property bool showBack:false

    property string urlAvatarFriend: "/images/resources/Back.png";
    property bool visibleAvatarFriend: false;

    signal backClicked()
    signal rightMenuClicked()
    signal leftMenuClicked()
    signal logout();

    Rectangle {
        color: Qt.lighter(parent.color, 1.2)
        height: 1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 1
        width: parent.width
    }

    Rectangle {
        z: 2 // so flickable doesn't draw on top
        height: 1
        color: Qt.darker(parent.color, 1.2)
        width: parent.width
        anchors.bottom: parent.bottom
    }

    RowLayout {
        id: titleRow
        anchors.left: parent.left
        anchors.right: parent.right
        spacing: 0
        anchors.verticalCenter: parent.verticalCenter

        Seperator {}

        //--- back button
        Image {
            source: imageBack
            Layout.preferredWidth: 48 *  ApplicationInfo.ratio
            Layout.preferredHeight: 48 * ApplicationInfo.ratio
            visible: showBack

            MouseArea {
                id: backArea
                anchors.fill: parent

                onClicked: {
                    backClicked();
                    console.log("Back Clicked")
                }
            }

            Seperator {}
        }

        //Avartar Friend
        ItemImageChat {
            id: imageAvatarFriend
            visible: visibleAvatarFriend;

            m_width: 50 * m_ratio
            m_height: 50 * m_ratio
        }


        //--- icon
        Image {
            source: imageIcon
            Layout.preferredWidth: 48 * ApplicationInfo.ratio
            Layout.preferredHeight: 48 * ApplicationInfo.ratio
            visible: !showBack

            MouseArea {
                id: iConArea
                anchors.fill: parent

                onClicked: {
                    leftMenuClicked()
                    logout();
                    console.log("leftMenu Clicked")
                }
            }

        }

        Seperator {}


        //-- title
        TouchLabel {
            id: t1
            text: title
            color: ApplicationInfo.colors.white
            pixelSize: 20
            font.weight: Font.Bold
            Layout.maximumWidth: 1000
            Layout.alignment: Qt.AlignBaseline
        }

        Item {
            Layout.fillWidth: true
            height: 0
        }

        Seperator {}

        //-- menu label
        Image {
            source: imageMenuRight
            Layout.preferredWidth: 30 * ApplicationInfo.ratio
            Layout.preferredHeight: 35 * ApplicationInfo.ratio
            visible: true
            MouseArea {
                id: id_mouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("id_mouseArea Clicked")

                    rightMenuClicked();
                }
            }
        }
        Seperator {}

    }

    Rectangle {
        width: parent.width
        height: 5
        anchors.top: parent.bottom
        gradient: Gradient {
            GradientStop {position: 0 ; color: "#40000000"}
            GradientStop {position: 1 ; color: "#00000000"}
        }
    }

}
